<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录 - 社交平台</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        :root {
            --primary: #5b5fff;
            --primary-light: #e0e1ff;
            --primary-dark: #4a4fd8;
            --gray-100: #f8f9fa;
            --gray-200: #e9ecef;
            --gray-300: #dee2e6;
            --gray-400: #ced4da;
            --gray-500: #adb5bd;
            --gray-600: #6c757d;
            --gray-700: #495057;
            --success: #28a745;
            --warning: #ffc107;
        }
    </style>
</head>
<body class="auth-body-bg">
<!-- 浮动背景元素 -->
<div class="floating-bg-element"></div>
<div class="floating-bg-element"></div>
<div class="floating-bg-element"></div>
<div class="floating-bg-element"></div>

<div class="auth-container">
    <div class="auth-card">
        <div class="auth-header">
            <h2 class="auth-title">用户登录</h2>
        </div>

        <div class="auth-body">
            <c:if test="${not empty param.registerSuccess}">
                <div class="auth-alert auth-alert-success show">
                    <i class="bi bi-check-circle-fill me-2"></i>注册成功，请登录您的账号
                </div>
            </c:if>
            <c:if test="${not empty error}">
                <div class="auth-alert auth-alert-danger show">
                    <i class="bi bi-exclamation-circle-fill me-2"></i>${error}
                </div>
            </c:if>

            <form id="loginForm" action="${pageContext.request.contextPath}/UserLoginServlet" method="post">
                <div class="auth-form-group">
                    <label for="account" class="auth-form-label">账号</label>
                    <input type="text" class="auth-form-input" id="account" name="account"
                           placeholder="请输入昵称、手机号或邮箱" required>
                </div>

                <div class="auth-form-group">
                    <label for="password" class="auth-form-label">密码</label>
                    <input type="password" class="auth-form-input" id="password" name="password"
                           placeholder="请输入密码" required>
                </div>

                <div class="auth-form-group">
                    <button type="submit" class="auth-btn auth-btn-primary">登录</button>
                </div>

                <div class="auth-form-group">
                    <a href="${pageContext.request.contextPath}/views/auth/register.jsp"
                       class="auth-btn auth-btn-outline">注册新账号</a>
                </div>
            </form>

            <div class="auth-link-container">
                <a href="#" class="auth-link">忘记密码?</a>
                <span class="mx-2">|</span>
                <a href="#" class="auth-link">帮助中心</a>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 处理表单提交后的提示显示
    document.addEventListener('DOMContentLoaded', function() {
        const loginForm = document.getElementById('loginForm');

        if (loginForm) {
            loginForm.addEventListener('submit', function() {
                // 这里可以添加表单验证逻辑
                // 成功或失败提示由后端返回后显示
            });
        }

        // 如果有错误信息，显示提示
        const errorAlert = document.querySelector('.auth-alert-danger');
        if (errorAlert) {
            errorAlert.classList.add('show');
        }

        // 如果有注册成功提示，显示
        const successAlert = document.querySelector('.auth-alert-success');
        if (successAlert) {
            successAlert.classList.add('show');
        }
    });
</script>
</body>
</html>